<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8" name="viewport" content="width=device-width,initial-scale=1.0,user-scalable=no">
    <title>5-2使用渐变色背景</title>
    <link rel="stylesheet" href="../common.css">
    <script src="../jquery-2.2.0.js"></script>
    <script src="../main.js"></script>
    <style>
        div{
            width: 300px;
            height: 300px;
            border: 1px solid #666;
            font-weight: bold;
            color: #fff;
            text-shadow: 1px 1px 2px black;
            /*text-align: center;*/
            padding: 5px;
            line-height: 1.5rem;
            display: inline-block;
            margin:10px auto;
            vertical-align: top;
        }
        div code{
            margin-top: 2em;
            margin-left: 2em;
            font-weight: normal;
            text-shadow:none;
            white-space: normal;
            /*background-color: rgba(206,239,152,0.3);*//*这样有的代码和背景颜色接近就看不清了*/
        }
        #linear div:nth-of-type(1){
            background: linear-gradient(to bottom,skyblue,green);
        }
        #linear div:nth-of-type(2){
            background: linear-gradient(30deg,skyblue,green);
        }
        #linear div:nth-of-type(3){
            background: linear-gradient(to bottom,skyblue 30%,green 80%);
        }
        #linear div:nth-of-type(4){
            background: linear-gradient(to bottom, #7d97ff 0% ,skyblue 25%,white 50%,#91a200 80%, green 95%);
        }

        #radial div{
            width: 400px;
            height:200px;
        }
        #radial div:nth-of-type(1){
            background: radial-gradient(skyblue,black);
        }
        #radial div:nth-of-type(2){
            background: radial-gradient(circle,skyblue,black);
        }
        #radial div:nth-of-type(3){/*这里的circle不起作用？？？*/
            background: radial-gradient(circle at top center , skyblue,black);
        }
        #radial div:nth-of-type(4){
            background: radial-gradient(at bottom right , skyblue,black);
        }
        #radial div:nth-of-type(5){
            background: radial-gradient(ellipse closest-side at 130px 50px , skyblue,black);
        }
        #radial div:nth-of-type(6){
            background: radial-gradient(ellipse farthest-corner at 130px 50px , skyblue,black);
        }
        #radial div:nth-of-type(7){
            background: radial-gradient(circle 95px at 130px 50px , skyblue,black);
        }
        #radial div:nth-of-type(8){
            background: radial-gradient(ellipse 95px 235px at 50% 95% , skyblue,black);
        }
        #radial div:nth-of-type(9){
            background: radial-gradient(circle farthest-side at 0% 100%, blue 30%,purple 35%,cornflowerblue 40%,cyan 45%,lightgreen 50%,yellow 55%,orange 60%,red 65%,blue 70%,blue);
        }
    </style>
</head>
<body>
<h1>5-2使用渐变色背景</h1>
<h3>线性渐变背景色</h3>
<section id="linear">
    <div><code>background: linear-gradient(to bottom,skyblue,green);</code><br>从上向下渐变</div>
    <div><code>background: linear-gradient(30deg,skyblue,green);</code>旋转30°的渐变（从12点方向开始）</div>
    <div><code>background: linear-gradient(to bottom,skyblue 30%,green 80%);</code>控制渐变起始</div>
    <div><code>background: linear-gradient(to bottom, #7d97ff 0% ,skyblue 25%,white 50%,#91a200 80%, green 95%);</code>多个渐变</div>
</section>

<h3>放射性渐变背景色</h3>
<section id="radial">
    <div><code>radial-gradient(skyblue,black);</code><br>基本的放射性渐变,不一定是正圆，长短半径随div形状而变化</div>
    <div><code>radial-gradient(circle,skyblue,black);</code><br>指定为正圆放射</div>
    <div><code>radial-gradient(circle at top center , skyblue,black);</code><br>指定放射起点为正上方居中</div>
    <div><code> background: radial-gradient(at bottom right , skyblue,black);</code><br>指定放射起点为右下角</div>
    <h2 class="problem">从这里开始，后面再内容里写了相关代码的部分，不再专门用代码样式列出</h2>
    <div>(ellipse closest-side at 130px 50px , skyblue,black)从起点130px 50px放射到最近的边</div>
    <div>(ellipse farthest-corner at 130px 50px , skyblue,black)从起点130px 50px放射到最远的角</div>
    <div>(circle 95px at 130px 50px , skyblue,black)从起点130px 50px放射半径为95px的正圆</div>
    <div>(ellipse 95px 235px at 50% 95% , skyblue,black)从起点50% 95%放射到水平半径为95px，竖直半径为235px的椭圆</div>
    <div>以左下角开始彩虹色放射：background: radial-gradient(circle farthest-side at 0% 100%, blue 30%,purple 35%,cornflowerblue 40%,cyan 45%,lightgreen 50%,yellow 55%,orange 60%,red 65%,blue 70%,blue);
    </div>
</section>

</body>
</html>